<script setup lang="ts">

import {deleteArticleUrl} from "@/api/blog/article.ts";

const props = defineProps({
  article: {
    type: Object,
    default: () => {
    }
  }
})

const {proxy}: any = getCurrentInstance
const $emit = defineEmits(['getList', 'openDialog'])
const Base_URL = import.meta.env.BASE_URL


// 编辑文章基本信息
const handleEditArticleBase = () => {
  $emit('openDialog', props.article)
}
// 编辑文章内容
const handleEditArticle = () => {
  // 查看浏览器有没有打开对应的标签页，如果有的话直接跳到对应的标签页，否则打开新的标签页
  const url = Base_URL + 'article/edit/' + props.article.artId;
  window.open(url, 'edit-' + props.article.artId);
}


const handleCommand = (command: string | number | object) => {
  switch (command) {
    case 'base':
      handleEditArticleBase()
      break
    case 'content':
      handleEditArticle()
      break
  }
}

const handleDeleteArticle = () => {
  // 删除文章
  proxy.$modal.confirm('确定删除该文章吗？').then(() => {
    deleteArticleUrl({artId: props.article.artId}).then((res: any) => {
      proxy.$modal.msgSuccess(res.msg)
      $emit('getList')
    })
  })
}
const handleViewArticle = () => {
  // 查看文章
  const url = Base_URL + 'article/details/' + props.article.artId;
  window.open(url, 'details-' + props.article.artId);
}


</script>

<template>
  <div class="article-item-box">
    <div class="article-item-content">
      <div class="article-item-img" v-if="article.artCoverUrl">
        <img :src="article.artCoverUrl"/>
      </div>
      <div class="content">
        <div class="article-item-title">
          {{ article.artTitle || "【无标题】" }}
        </div>
        <div>
          <el-tag type="info" v-if="article.status === 0">草稿</el-tag>
          <el-tag type="success" v-else-if="article.status === 1">已发布</el-tag>
        </div>
        <div class="article-item-text-info">
          <!-- 评论，点赞，收藏    -->
          <el-space>
            <span class="comment-count">评论&nbsp;{{ article.commentCount }}</span>
            <strong>·</strong>
            <span class="comment-count">点赞&nbsp;{{ article.likeCount }}</span>
            <strong>·</strong>
            <span class="comment-count">收藏&nbsp;{{ article.collectCount }}</span>
          </el-space>
        </div>
      </div>
    </div>
    <div class="article-item-op">
      <div class="article-item-op-time">
        {{ article.createTime }}
      </div>
      <div class="article-item-op-btn">
        <div class="grid-box-footer">
          <el-button link @click="handleViewArticle">阅读</el-button>
          <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                编辑
              </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="base">基本信息</el-dropdown-item>
                <el-dropdown-item command="content">文章内容</el-dropdown-item>
                <el-dropdown-item command="pic">文章图片</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="danger" link @click="handleDeleteArticle">删除</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article-item-box {
  min-width: 800px;
  height: 130px;
  padding: 16px;
  display: flex;
  position: relative;
  justify-content: space-between;
  /*下边虚线边框*/
  border-bottom: 1px dashed rgba(0, 0, 0, 0.3);

  .article-item-img {
    width: 160px;
    height: 100%;
    margin-right: 20px;

    img {
      border-radius: 2px;
      width: 100%;
      height: 100%;
    }
  }
  .article-item-content {
    display: flex;

    .content {
      .article-item-title {
        width: 360px;
        margin-right: 20px;
        font-weight: bold;
        font-size: 18px;
        line-height: 36px;
        font-family: "KaiTi", serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

  }

  .article-item-op {
    bottom: 16px;
    right: 16px;
    /*里面的内容上下布局*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .article-item-op-time {
      color: #999999;
      font-size: 13px;
      /*里面的内容居右*/
      text-align: right;
    }

    .article-item-op-btn {
      color: grey !important;
      display: flex;
    }
  }
}

.grid-box-footer {
  width: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
